<template>
	<view class="logup">
		<image class="logo" src="/static/img/Logo_Register.jpg"></image>
		<view class="SystermTitle01">WelCome</view>
		<view class="SystermTitle02">JD.com</view>
		<form @submit="formSubmit" class="logup-form">
			<view class="logup-form-item">
				<view class="title" type="label">用户名</view>
				<input name="username" placeholder="要求6-20位字母、数字或者下划线" v-model="form.username">
			</view>
			<view class="logup-form-item">
				<view class="title" type="label">密码</view>
				<input name="password" placeholder="要求包含6-20位大小写字母和数字" v-model="form.password">
			</view>
			<view class="logup-form-item">
				<view class="title" type="label">邮箱</view>
				<input name="email" placeholder="请输入您的邮箱" v-model="form.email">
			</view>
			<view class="logup-form-item">
				<view class="title" type="label">姓氏</view>
				<input name="first_name" placeholder="1-10个字符：中/英文" v-model="form.firstName">
			</view>
			<view class="logup-form-item">
				<view class="title" type="label">名字</view>
				<input name="last_name" placeholder="1-20个字符：中/英文" v-model="form.lastName">
			</view>
			<view class="logup-form-item">
				<button form-type="submit">注册</button>
			</view>
			<view class="goToLogin">
				<view @click="goToLoginClick()">登录</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					email: '',
					firstName: '',
					lastName: ''
				}
			}
		},
		methods: {
			goToLoginClick(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			validateUsername() {
				const regex = /^\w{6,20}$/; // 6-20位字母、数字或者下划线
				return regex.test(this.form.username);
			},

			validatePassword() {
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/; // 包含6-20位大小写字母和数字
				return regex.test(this.form.password);
			},

			validateEmail() {
				const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; // 邮箱格式校验正则表达式
				return regex.test(this.form.email);
			},

			validateFirstName() {
				const regex = /^[\u4e00-\u9fa5a-zA-Z]{1,10}$/; // 1-10个字符：中/英文
				return regex.test(this.form.firstName);
			},

			validateLastName() {
				const regex = /^[\u4e00-\u9fa5a-zA-Z]{1,20}$/; // 1-20个字符：中/英文
				return regex.test(this.form.lastName);
			},

			showAlert(message) {
				uni.showToast({
					title: message,
					icon: "none",
				});
			},

			formSubmit(formData) {
				if (!this.validateUsername()) {
					this.showAlert("请输入有效的用户名");
					return;
				}

				if (!this.validatePassword()) {
					this.showAlert("请输入有效的密码");
					return;
				}

				if (!this.validateEmail()) {
					this.showAlert("请输入有效的邮箱");
					return;
				}

				if (!this.validateFirstName()) {
					this.showAlert("请输入有效的姓氏");
					return;
				}

				if (!this.validateLastName()) {
					this.showAlert("请输入有效的名字");
					return;
				}


				console.log(formData.detail.value)
				uni.showLoading({
					title: '注册中...',
					// 表示底部背景，不可操作
					mask: true
				})
				uni.request({
					// 发送到后端url中的register
					url: 'http://127.0.0.1:8002/register/',
					method: "POST",
					data: formData.detail.value,
					success(res) {
						// 请求完成后，隐藏加载中提示框
						uni.hideLoading()
						console.log(res.data)
						console.log(res.data.code)
						uni.showToast({
							title: res.data.message,
							icon: res.data.status,
							duration: 2000,
						})
						if (res.data.code == 2000) {
							// 注册成功后延迟1.5秒跳转到登录页
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					},
					fail(error) { // 处理网络错误
						console.log(error)
						// 请求完成后，隐藏加载中提示框
						uni.hideLoading()
					}
				})
			},
		},
	}
</script>

<style>
	.logup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.logup .logo {
		height: 300rpx;
		width: 300rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		border-radius: 50%;
	}

	.logup .SystermTitle01 {
		font-size: 60rpx;
		color: #ff3b19;
	}

	.logup .SystermTitle02 {
		font-size: 36rpx;
		color: #ff8b3e;
	}

	.logup-form-item {
		margin: 40rpx 0;
	}

	.logup-form-item .title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.logup-form-item label {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		display: block;
	}

	.logup-form-item input {
		height: 80rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		border: none;
		border-radius: 40rpx;
		outline: none;
		width: 600rpx;
		color: black;
		background-color: rgba(0, 0, 0, 0.05);
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.logup-form-item button {
		background-color: #007aff;
		color: #fff;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		border: none;
		outline: none;
		width: 100%;
		margin-top: 80rpx;
		transition: background-color 0.2s;
	}

	.logup-form-item button:hover {
		background-color: #0062cc;
	}

	.goToLogin {
		float: right;
		margin-top: 10rpx;
	}
</style>
